<template>
    <view class="page">
        <view class="equipment">
            <view class="header">
                <text>我的设备</text>
                <image
                    :src="arrow"
                    mode=""
                    :class="{ arrow: true, rotate: showAllEquipment }"
                    @click="handleShowAll"
                >
                </image>
            </view>
            <view v-if="!showAllEquipment" class="single">
                <view class="left">
                    <image
                        :src="studentHeadImage(currentEquipment.sex)"
                        mode=""
                        class="avatar"
                    ></image>
                    <view class="info">
                        <view class="info_name">
                            {{ currentEquipment.name }}
                        </view>
                        <view class="info_serial"> 序列号：{{ currentEquipment.number }} </view>
                    </view>
                </view>
            </view>
            <template v-else>
                <view v-for="(i, idx) in myEquipmentList" :key="idx" class="single">
                    <view class="left">
                        <image :src="studentHeadImage(i.sex)" mode="" class="avatar"></image>
                        <view class="info">
                            <view class="info_name">
                                {{ i.name }}
                            </view>
                            <view class="info_serial"> 序列号：{{ i.number }} </view>
                        </view>
                    </view>
                    <view v-if="showAllEquipment" class="right">
                        <image
                            :src="i.checked ? checked : unchecked"
                            mode=""
                            class="check_icon"
                            @click="handleChecked(i)"
                        >
                        </image>
                    </view>
                </view>
            </template>
        </view>
        <view class="equipment_application">
            <view class="navigate">
                <text
                    v-for="(i, idx) in navList"
                    :key="idx"
                    :class="{ navigate_item: true, active: activeNav.type === i.type }"
                    @click="swicthNav(i)"
                    >{{ i.title }}</text
                >
            </view>
            <view class="application">
                <view v-for="i in 3" :key="i" class="application_item">
                    <view class="left">
                        <image :src="studentHeadImage(1)" mode="" class="avatar"></image>
                        <view class="info">
                            <view class="info_name"> 纳米盒 </view>
                            <view class="info_time"> 今日使用：1时38分 </view>
                        </view>
                    </view>
                    <view class="right">
                        <text class="control" @click="handleControl">管控</text
                        ><text class="delete" @click="handleDelete">卸载</text>
                    </view>
                </view>
            </view>
        </view>
        <CustomPopup
            v-model="showCustomPopup"
            titleText="温馨提示"
            @handleConfirmBtn="handleConfirmPopup"
        >
            <view class="popup_box"> 确认卸载该应用？ </view>
        </CustomPopup>
        <view class="picker_box">
            <uni-popup ref="popupRef" is-mask-click="true" animation="true" type="bottom">
                <view class="bottom_popup">
                    <view class="header_title"> 选择使用方式 </view>
                    <view class="method_list">
                        <view v-for="(i, idx) in methodList" :key="idx" class="item">
                            {{ i.name }}
                        </view>
                    </view>
                    <button class="confirm_btn" @click="handleConfirmControl">确定</button>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { studentHeadImage } from '@/hooks/useImage';

import CustomPopup from './Components/CustomPopup.vue';

const OSS_URL = import.meta.env.VITE_OSS_HOST;
const arrow = `${OSS_URL}/iconfont/down_arrow.png`;
const checked = `${OSS_URL}/iconfont/checked.png`;
const unchecked = `${OSS_URL}/iconfont/unchecked.png`;
const showAllEquipment = ref(false);
const showCustomPopup = ref(false);

const popupRef = ref(null);
const methodList = ref([
    {
        name: '允许使用',
    },
    {
        name: '限制使用',
    },
    {
        name: '禁止使用',
    },
]);
const currentEquipment = ref({
    sex: 1,
    name: '昵称1',
    number: '16234992571504193',
    checked: false,
});
const myEquipmentList = ref([
    {
        sex: 1,
        name: '昵称1',
        number: '16234992571504193',
        checked: false,
    },
    {
        sex: 2,
        name: '昵称最长这么长昵称最长这么长',
        number: '16234992571504193',
        checked: false,
    },
    {
        sex: 1,
        name: '昵称3',
        number: '16234992571504193',
        checked: true,
    },
]);
const activeNav = ref({
    title: '允许使用',
    type: 1,
});
const navList = reactive([
    {
        title: '允许使用',
        type: 1,
    },
    {
        title: '限制使用',
        type: 2,
    },
    {
        title: '禁止使用',
        type: 3,
    },
]);

function handleShowAll() {
    showAllEquipment.value = !showAllEquipment.value;
}

function handleChecked(i) {
    currentEquipment.value = i;
    myEquipmentList.value = myEquipmentList.value.map(item => {
        if (item.name === i.name) {
            return {
                ...item,
                checked: true,
            };
        } else {
            return {
                ...item,
                checked: false,
            };
        }
    });
}

function swicthNav(i) {
    activeNav.value = i;
}
// 管控
function handleControl() {
    uni.hideTabBar();
    popupRef.value && popupRef.value.open();
}

function handleConfirmControl() {
    uni.showTabBar();
    popupRef.value.close();
    setTimeout(() => {
        popupRef.value.close();
    }, 200);
}
// 卸载
function handleDelete() {
    showCustomPopup.value = true;
}

function handleConfirmPopup() {
    showCustomPopup.value = false;
}
</script>

<style lang="scss" scoped>
.page {
    padding: 30rpx;

    .equipment {
        padding: 0 30rpx;
        border-radius: 20rpx;
        background-color: #fff;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 26rpx 0;
            font-size: 32rpx;
            font-weight: 500;
            line-height: 48rpx;

            .arrow {
                width: 36rpx;
                height: 36rpx;
            }

            .rotate {
                transform: rotate(180deg);
            }
        }

        .single {
            padding: 30rpx 0;
            border-top: 1rpx solid rgba(238, 238, 238, 1);
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                align-items: center;

                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    margin-right: 20rpx;
                }

                .info {
                    &_name {
                        margin-bottom: 10rpx;
                        line-height: 45rpx;
                        font-size: 30rpx;
                        font-weight: 500;
                        color: rgba(51, 51, 51, 1);
                        max-width: 210rpx;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    &_serial {
                        line-height: 42rpx;
                        font-size: 28rpx;
                        color: rgba(169, 170, 181, 1);
                    }
                }
            }

            .right {
                .check_icon {
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
    }

    .equipment_application {
        margin-top: 40rpx;

        .navigate {
            display: flex;

            &_item {
                margin-right: 40rpx;
                color: rgba(169, 170, 181, 1);
                font-size: 28rpx;
                line-height: 48rpx;
            }

            .active {
                position: relative;
                font-weight: 500;
                font-size: 32rpx;
                color: rgba(51, 51, 51, 1);

                &::after {
                    position: absolute;
                    bottom: -10rpx;
                    left: 50%;
                    transform: translateX(-50%);
                    content: '';
                    display: block;
                    width: 30rpx;
                    height: 8rpx;
                    background-color: rgba(97, 93, 255, 1);
                    border-radius: 8rpx;
                }
            }
        }

        .application {
            padding: 0 30rpx;
            margin-top: 10rpx;
            background-color: #fff;
            border-radius: 20rpx;

            &_item {
                padding: 30rpx 0;
                border-bottom: 1rpx solid rgba(238, 238, 238, 1);
                display: flex;
                justify-content: space-between;
                align-items: center;

                &:last-child {
                    border-bottom: none;
                }

                .left {
                    display: flex;
                    align-items: center;

                    .avatar {
                        width: 80rpx;
                        height: 80rpx;
                        margin-right: 20rpx;
                        border-radius: 25rpx;
                    }

                    .info {
                        &_name {
                            margin-bottom: 10rpx;
                            line-height: 45rpx;
                            font-size: 30rpx;
                            font-weight: 500;
                            color: rgba(51, 51, 51, 1);
                            max-width: 210rpx;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }

                        &_time {
                            line-height: 36rpx;
                            font-size: 24rpx;
                            color: rgba(169, 170, 181, 1);
                        }
                    }
                }

                .right {
                    font-size: 24rpx;
                    line-height: 36rpx;
                    background-color: rgba(235, 235, 255, 1);
                    border-radius: 10rpx;

                    .control {
                        display: inline-block;
                        padding: 6rpx 20rpx;
                        color: rgba(97, 93, 255, 1);
                        border-right: 1rpx solid rgba(223, 223, 242, 1);
                    }

                    .delete {
                        display: inline-block;
                        padding: 6rpx 20rpx;
                        color: rgba(156, 153, 255, 1);
                    }
                }
            }
        }
    }

    .popup_box {
        margin: 50rpx 0;
    }

    .picker_box {
        height: 750rpx;
    }

    .bottom_popup {
        background-color: #fff;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;

        .header_title {
            margin: 30rpx 0 0 30rpx;
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
            font-weight: 500;
            text-align: left;
        }

        .method_list {
            text-align: center;
            padding: 0 54rpx;

            .item {
                padding: 30rpx 0;
                border-bottom: 1rpx solid rgba(235, 235, 235, 1);
                font-weight: 400;
                height: 45rpx;
                color: rgba(169, 170, 181, 1);
            }
        }

        .confirm_btn {
            margin: 16rpx auto 20rpx auto;
            height: 90rpx;
            width: 690rpx;
            color: #fff;
            background-color: #615dff;
        }
    }
}
</style>
